import styled from "styled-components";

export const RankingRightBox = styled.div`
    padding: 40px;
    box-sizing: border-box;
    .music_details_list {
        .details_item {
            display: flex;
        }
    }
    .conten_top {
        display: flex;
        align-items: center;
        .btns {
            width: 480px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .counts {
                height: 31px;
                line-height: 30px;
                min-width: 23px;
                cursor: pointer;
                padding: 0 5px 0 0;
                white-space: nowrap;
                color: #333;
                text-decoration: none;
                background-position: right -1020px;
                i {
                    display: block;
                    padding-right: 2px;
                    padding-left: 28px;
                    height: 31px;
                    line-height: 30px;
                    min-width: 23px;
                    cursor: pointer;
                }
            }

            .message_outlined {
                i {
                    background-position: 0 -1465px;
                }
            }
            .share_count {
                i {
                    background-position: 0 -1225px;
                }
            }
            .download_outlined {
                i {
                    background-position: 0 -2761px;
                }
            }
            .folder_add_outlined {
                i {
                    background-position: 0 -977px;
                }
            }
        }
        .conten_info {
            .title {
                color: #333;
                font-size: 20px;
            }
            .updata_time {
                color: #666;
                font-size: 12px;
                margin-bottom: 20px;
                .title_time {
                    margin-left: 6px;
                }
                .time {
                    margin: 0 6px;
                }
                .undata_period {
                    color: #999;
                }
            }
        }
        .cover_img {
            padding: 3px;
            border: 1px solid #ccc;
            margin-right: 30px;
            img {
                width: 150px;
                height: 150px;
            }
        }
    }
`;
